<template>
  <div class="edit">
    <div class="edit-tool">
      <Button class="edit-btn" @click="saveToLocal">保存配置</Button>
      <Button class="edit-btn" @click="readLocal">读取配置</Button>
      <Button class="edit-btn" @click="handlePreview">预览</Button>
    </div>

    <div class="edit-item">
      <div class="edit-title">标题</div>
      <Editor key="title" ref="titleEditor" :style="{width:'50%'}" :value.sync="title" editorKey="title"></Editor>
    </div>
    <div class="edit-item">
      <div class="edit-title">描述</div>
      <Editor key="description" ref="descriptionEditor" :style="{width:'50%'}" :value.sync="description"
              editorKey="description"></Editor>
    </div>
    <div class="edit-item">
      <div class="edit-title">图片编辑</div>
      <Draggable v-model="picFile" class="picFile">
        <div v-for="(item,index) in picFile" :key="index" class="picFile-item flex flex-column">
          <div :class="{hasContent:item.base64}" class="picFile-imageBox flex-center-center">
            <div class="picFile-toolMask flex-center-center">
              <Icon size="24" type="ios-create" @click="handleEditPic(item,index)"/>
              <Icon v-if="item.base64" size="24" type="md-eye" @click="previewPic(item,index)"/>
            </div>
            <img v-if="item.base64" :src="item.base64" class="picFile-image">
          </div>
        </div>
      </Draggable>
      <div class="edit-pic-btn" @click="addPic">+添加图片</div>
    </div>
    <div ref="picEditDom"></div>
    <!--    <PicEdit ref="picEdit" @handleCancel="handleCancel" @handleConfirm="handleConfirm"></PicEdit>-->
    <ModalExport ref="modalExport" errorTips="JSON名称不能为空" label="JSON文件名称"
                 @handleConfirm="handleExport"></ModalExport>
  </div>

</template>

<script>
import ModalExport from "@/components/ModalExport/index.vue";
import Editor from "@/components/Editor/index.vue";
import PicEdit from "@/components/PicEdit/index.vue";
import Vue from "vue";
import Draggable from "vuedraggable";
import {v4 as uuid} from 'uuid'
import indexedDB from "@/util/indexedDB";
import {blobToString, fileExport, fileImport} from "@/util/file";
import {modalOpen, modalDestroy} from "@/util/modal";

Vue.config.silent = true
export default {
  components: {
    ModalExport,
    Editor,
    Draggable
  },
  data() {
    return {
      title: '',
      description: '',
      picFile: [],
      show: false,
      picEditShow: true,
      modalCahce: {
        index: -1
      }
    }
  },
  mounted() {
    console.log(this)

  },
  methods: {
    handlePreview() {
      console.log(indexedDB)
      const config = {
        title: this.title,
        description: this.description,
        picFile: this.picFile
      }
      window.sessionStorage.setItem('Home_to_Preview_previewConfig', JSON.stringify(config))
      // this.$router.resolve('/preview',)
      const url = this.$router.resolve('/preview')
      window.open(window.location.origin + window.location.pathname + url.href,)
      // window.postMessage(JSON.stringify(config),window.location.origin)
    },
    handleExport(templateName) {
      const config = {
        title: this.title,
        description: this.description,
        picFile: this.picFile
      }
      // 导出json配置
      fileExport(JSON.stringify(config), templateName, {type: "application/json",})

    },
    readLocal() {
      // 导入文件
      fileImport(async (e) => {
        const str = await blobToString(e.target.files[0])
        const {title, description, picFile} = JSON.parse(str);
        this.title = title;

        this.description = description;
        this.picFile = picFile;
        this.$nextTick(() => {
          this.$refs.titleEditor.setHtml(title);
          this.$refs.descriptionEditor.setHtml(description);
        })

      }, {filesType: '.json'})
    },
    saveToLocal() {
      this.$refs.modalExport.open()

    },
    addPic() {
      this.picFile.push({
        id: uuid(),
        base64: '',
        config: null
      })
    },
    handleCancel() {
      modalDestroy();
    },
    handleConfirm(data) {
      const {index, config, base64} = data;
      this.$set(this.picFile, index, {...this.picFile[index], config, base64});
    },
    previewPic(item) {
      this.$viewerApi({
        images: [item.base64],
        options: {
          title: false,
          toolbar: false,
        },
      });
    },
    handleEditPic(item) {
      modalOpen({
        render: () => {
          return <PicEdit onHandleCancel={this.handleCancel} onHandleConfirm={this.handleConfirm}/>
        },
        callback: (instance) => {
          this.$nextTick(() => {
            instance.open(item)
          })
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.picFile {
  display: flex;
  flex-wrap: wrap;

  .picFile-item {
    margin-right: 16px;
    margin-bottom: 16px;

    .picFile-imageBox {
      overflow: hidden;
      border: 1px dashed #515a6e;
      border-radius: 10px;
      width: 150px;
      min-height: 150px;
      position: relative;

      &.hasContent {


        &:focus, &:active, &:hover {
          .picFile-toolMask {
            transition: 0.3s all;
            background-color: rgba(0, 0, 0, 0.9);
            visibility: visible;
          }
        }

        .picFile-toolMask {

          visibility: hidden;
        }
      }

      .picFile-toolMask {
        position: absolute;
        width: 100%;
        height: 100%;

        i {
          cursor: pointer;
        }

      }

      .picFile-image {
        width: 100%;
      }
    }

  }

}

.edit {
  padding: 16px;

  .edit-tool {
    margin-bottom: 8px;

    .edit-btn {
      margin-right: 8px;
    }
  }

  .edit-item {
    margin-bottom: 20px;

    .edit-title {
      font-size: 18px;
      margin-bottom: 8px;
    }

    //.edit-pic-btn {
    //  width: 40px;
    //  height: 40px;
    //}

  }
}
</style>
